{% extends "upload/upload-index.html" %}

{% load static %}

{% block style %}
    <style>
        .show {
            width: 80%;
            height: 80%;
            margin: 0 auto;
            padding-top: 5%;
        }

        .sizer {
            width: 100%;
            height: 100%;
            border: none;

        }
    </style>

    <link rel="stylesheet" href="{% static 'plus/player/DPlayer.min.css' %}">
    <script src="{% static 'plus/player/flv.min.js' %}"></script>
    <script src="{% static 'plus/player/hls.min.js' %}"></script>
    <script src="{% static 'plus/player/DPlayer.min.js' %}"></script>

{% endblock %}

{% block content %}
    <div class="show">
        {% ifequal label "img" %}
            <img class="sizer" src="{{ src }}">
        {% endifequal %}


        {% ifequal label "video" %}
            <div id="dplayer"></div>

            <script>
                const dp = new DPlayer({
                    container: document.getElementById('dplayer'),

                    video: {
                        url: '{{ src }}',
                    }
                });
            </script>
        {% endifequal %}


        {% ifequal label "none" %}
            <p>当前格式不支持线上播放，请下载使用</p>
            {{ src }}
        {% endifequal %}

    </div>
{% endblock %}

